<template>
  <div class="box">
    <h1>全校身高体重BMI分布情况</h1>
    <div class="container">
      <div class="top-container">
        <div class="pie-chart" ref="pieChart1"></div>
        <div class="pie-chart" ref="pieChart2"></div>
      </div>
      <div class="center-container">
        <div class="bar-chart" ref="barChart1"></div>
        <div class="bar-chart" ref="barChart2"></div>
      </div>
      <div class="bottom-container">
        <div class="line-chart" ref="lineChart"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';
import { getLeftBottomMainChartData } from '@/api/data-screen/LeftChart';
import { useRouter } from 'vue-router';
const router = useRouter();

// 类型定义
interface ChartData {
  malePie: {
    qualified: number;
    unqualified: number;
  };
  femalePie: {
    qualified: number;
    unqualified: number;
  };
  maleBar: number[];
  femaleBar: number[];
  lineChart: {
    maleData: number[];
    femaleData: number[];
  };
}

const chartData = ref<ChartData>();

// 获取数据
const init = async () => {
  try {
    const response = await getLeftBottomMainChartData(); // 替换为实际API地址
    chartData.value = response.data;
    // 初始化图表
    initPieChart();
    initBarChart1();
    initBarChart2();
    initLineChart();
  } catch (error) {
    console.error('数据获取失败:', error);
  }
};


const pieChart1 = ref<HTMLElement | null>(null);
const pieChart2 = ref<HTMLElement | null>(null);
// 初始化
let pieChart1Instance: echarts.ECharts | null = null;
let pieChart2Instance: echarts.ECharts | null = null;
const initPieChart = () => {
  if (pieChart1.value && pieChart2.value) {
    pieChart1Instance = echarts.init(pieChart1.value);
    pieChart2Instance = echarts.init(pieChart2.value);
    updatePieChart1();
    updatePieChart2();
  }
};
// 饼图 BMI 男
const updatePieChart1 = async () => {
  try {
    var option;

    option = {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        top: '8%',
        left: 'center',
        textStyle: {
          color: '#ccc', // 文字颜色，可自定义
          fontSize: 18 // 文字大小
        },
        itemWidth: 20, // 图例图标宽度
        itemHeight: 10 // 图例图标高度
      },
      series: [
        {
          name: '合格率',
          type: 'pie',
          radius: ['50%', '70%'],
          center: ['50%', '60%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 40,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            {
              value: chartData.value.malePie.qualified,
              name: '合格',
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0, color: '#00FF7F' // 渐变起始颜色
                  },
                  {
                    offset: 1, color: '#00BFFF' // 渐变结束颜色
                  }]
                },
              }
            }, // 设置合格部分颜色
            {
              value: chartData.value.malePie.unqualified,
              name: '不合格',
              itemStyle: { color: 'red' }
            } // 设置不合格部分颜色
          ]
        }
      ]
    };

    // 计算合格率
    const total = option.series[0].data.reduce((sum, item) => sum + item.value, 0);
    const passRate = ((option.series[0].data[0].value / total) * 100).toFixed(2);

    // 在中心显示合格率
    option.series[0].label = {
      show: true,
      position: 'center',
      formatter: `{a|${passRate}%}`,
      rich: {
        a: {
          fontSize: 17,
          fontWeight: 'bold',
          color: '#00FF00'
        }
      }
    };

    option && pieChart1Instance.setOption(option);
    // 绑定点击事件
    pieChart1Instance.on('click', function (params) {
      if (params.seriesType === 'pie') {
        const category = params.name; // "合格" 或 "不合格"
        // const value = params.value;   // 对应的数值
        if (category === '合格') {
          router.push({
            path: '/admin/school/memberManage',
            query: {
              gender: '1',
              bmiMax: 30,
              bmiMin: 17.5,
              page: 1,
              pageSize: 5,
            }
          })
        }
        else {
          router.push({
            path: '/admin/school/memberManage',
            query: {
              gender: '1',
              bmiMax: 17.49,
              bmiMin: 1,
              page: 1,
              pageSize: 5,
            }
          })
        }


      }
    });

  } catch (error) {
    console.log('获取左下中心图失败！')
  }
}
// 饼图 BMI 女
const updatePieChart2 = async () => {
  try {
    var option;

    option = {

      tooltip: {
        trigger: 'item'
      },
      legend: {
        top: '8%',
        left: 'center',
        textStyle: {
          color: '#ccc', // 文字颜色，可自定义
          fontSize: 18 // 文字大小
        },
        itemWidth: 20, // 图例图标宽度
        itemHeight: 10 // 图例图标高度
      },
      series: [
        {
          name: '合格率',
          type: 'pie',
          radius: ['50%', '70%'],
          center: ['50%', '60%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 40,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            {
              value: chartData.value.femalePie.qualified,
              name: '合格',
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0, color: '#00FF7F' // 渐变起始颜色
                  },
                  {
                    offset: 1, color: '#FFB6C1' // 渐变结束颜色
                  }]
                },
              }
            }, // 设置合格部分颜色
            {
              value: chartData.value.femalePie.unqualified,
              name: '不合格',
              itemStyle: { color: 'red' }
            } // 设置不合格部分颜色
          ]
        }
      ]
    };

    // 计算合格率
    const total = option.series[0].data.reduce((sum, item) => sum + item.value, 0);
    const passRate = ((option.series[0].data[0].value / total) * 100).toFixed(2);

    // 在中心显示合格率
    option.series[0].label = {
      show: true,
      position: 'center',
      formatter: `{a|${passRate}%}`,
      rich: {
        a: {
          fontSize: 17,
          fontWeight: 'bold',
          color: '#00FF00'
        }
      }
    };

    option && pieChart2Instance.setOption(option);
    pieChart2Instance.on('click', function (params) {
      if (params.seriesType === 'pie') {
        const category = params.name; // "合格" 或 "不合格"
        // const value = params.value;   // 对应的数值
        // alert(`类别: ${category}\n人数: ${value}`);
        // 可在此处添加自定义逻辑，例如：
        // handlePieClick(category, value);
        if (category === '合格') {
          router.push({
            path: '/admin/school/memberManage',
            query: {
              gender: '2',
              bmiMax: 24,
              bmiMin: 17,
              page: 1,
              pageSize: 5,
            }
          })
        }
        else {
          router.push({
            path: '/admin/school/memberManage',
            query: {
              gender: '2',
              bmiMax: 16.9,
              bmiMin: 1,
              page: 1,
              pageSize: 5,
            }
          })
        }
      }
    });

  } catch (error) {
    console.log('获取左下中心图失败！')
  }
}



//柱状图
const barChart1 = ref<HTMLElement | null>(null);
// 初始化
let barChart1Instance: echarts.ECharts | null = null;
const initBarChart1 = () => {
  if (barChart1.value) {
    barChart1Instance = echarts.init(barChart1.value);
    updatebarChart1();
  }
};

// 柱状图 BMI 男
const updatebarChart1 = async () => {
  try {
    type EChartsOption = echarts.EChartsOption;
    var option: EChartsOption;

    option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      title: {
        text: 'BMI/男', // 主标题
        //subtext: '按不同范围划分的BMI值', // 副标题
        left: 'center', // 标题居中
        textStyle: {
          color: '#fff', // 标题文字颜色
          fontSize: '1.1rem', // 标题字体大小
        },
      },
      grid: {
        left: '5%',
        right: '6%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: ["17.5以下", "17.5-17.9", "17.9-23.9", "23.9-30", "30以上"],
          axisLabel: {
            rotate: 0,//倾斜度
            color: '#ccc',// 调整轴标签字体颜色
            fontSize: '0.7rem', // 设置字体大小
            interval: 0, // 强制显示所有标签
          },
          axisTick: {
            alignWithLabel: true
          },
        }
      ],
      yAxis: [
        {
          type: 'value',
          axisLabel: {
            rotate: 0,//倾斜度
            fontSize: '0.7rem', // 设置字体大小
            color: '#ccc' // 调整轴标签字体颜色
          },
          name: '人数/人', // 纵坐标标题
          nameTextStyle: {
            color: '#fff', // 纵坐标标题颜色
            fontSize: '1rem', // 纵坐标标题字体大小
            padding: [0, 40, -15, 0] // 向右偏移，值越大，标题越向右移动（顶部右侧、底部左侧、左右对称）
          },
          nameGap: 29, // 向下移动标题，调整此值来控制标题的位置
          nameLocation: 'end', // 横坐标标题的位置，'start', 'center', 'end'
        }
      ],
      series: [
        {
          name: 'Direct',
          type: 'bar',
          barWidth: '60%',
          data: chartData.value.maleBar,
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: '#00BFFF' // 渐变起始颜色
              },
              {
                offset: 1, color: '#B0E0E6' // 渐变结束颜色
              }]
            },
          },
          markArea: {
            data: [
              // 偏轻区域 (17.5以下) - 红色
              [
                {
                  name: '偏轻',
                  xAxis: '17.5以下',
                  itemStyle: { color: 'rgba(255, 0, 0, 0.1)' }, // 浅红色
                  label: {
                    position: 'top', // 文字显示在区域内部
                    formatter: '偏轻',
                    fontSize: '1rem', // 设置字体大小
                    color: 'red', // 设置字体颜色
                    offset: [-12, 0] // 微调文字位置
                  }
                },
                { xAxis: '17.5以下' }
              ],
              // 合格区域 (17.5-17.9) - 黄色
              [
                {
                  name: '合格',
                  xAxis: '17.5-17.9',
                  itemStyle: { color: 'rgba(255, 255, 0, 0.2)' }, // 浅黄色背景
                  label: {
                    position: 'top', // 文字显示在区域内部
                    formatter: '合格',
                    fontSize: '1rem', // 设置字体大小
                    color: '#FFA07A', // 设置字体颜色
                    offset: [0, 0] // 微调文字位置
                  }
                },
                { xAxis: '17.5-17.9' }
              ],
              // 优秀区域 (17.9-23.9) - 绿色
              [
                {
                  name: '优秀',
                  xAxis: '17.9-23.9',
                  itemStyle: { color: 'rgba(0, 255, 0, 1)' }, // 浅绿色
                  label: {
                    position: 'top', // 文字显示在区域内部
                    formatter: '优秀',
                    fontSize: '1rem', // 设置字体大小
                    color: '#00FF00', // 设置字体颜色
                    offset: [0, 0] // 微调文字位置
                  }
                },
                { xAxis: '17.9-23.9' }
              ],
              // 合格区域 (23.9-30) - 黄色
              [
                {
                  name: '合格',
                  xAxis: '23.9-30',
                  itemStyle: { color: 'rgba(255, 255, 0, 0.2)' }, // 浅黄色
                  label: {
                    position: 'top', // 文字显示在区域内部
                    formatter: '合格',
                    fontSize: '1rem', // 设置字体大小
                    color: '#FFA07A', // 设置字体颜色
                    offset: [0, 0] // 微调文字位置
                  }
                },
                { xAxis: '23.9-30' }
              ],
              // 偏重区域 (30以上) - 红色
              [
                {
                  name: '偏重',
                  xAxis: '30以上',
                  itemStyle: { color: 'rgba(255, 0, 0, 0.1)' }, // 浅红色
                  label: {
                    position: 'top', // 文字显示在区域内部
                    formatter: '偏重',
                    fontSize: '1rem', // 设置字体大小
                    color: 'red', // 设置字体颜色
                    offset: [12, 0] // 微调文字位置
                  }
                },
                { xAxis: '30以上' }
              ]
            ]
          },
          markLine: {
            silent: true, // 添加此行，使 markLine 不响应鼠标事件
            data: [
              // 偏轻的线
              {
                name: '偏轻',
                xAxis: '17.5以下',
                lineStyle: { type: 'dashed', color: 'red' },
                label: { position: 'end', formatter: '' }
              },
              // 优秀的线
              {
                name: '',
                xAxis: '17.9-23.9',
                lineStyle: { type: 'dashed', color: '#00FF00' },
                label: { position: 'end', formatter: '' }
              },
              // 偏重的线
              {
                name: '偏重',
                xAxis: '30以上',
                lineStyle: { type: 'dashed', color: 'red' },
                label: { position: 'end', formatter: '' }
              }
              // 'dashed' — 虚线。'solid' — 实线。'dotted' — 点线。
            ]
          }
        }
      ]
    };


    option && barChart1Instance.setOption(option);
    barChart1Instance.on('click', function (params) {
      if (params.seriesType === 'bar') {
        const bmiRange = params.name; // BMI 范围，例如 "17.5以下"
        // const numberOfPeople = params.value; // 人数
        // alert(`BMI 范围: ${bmiRange}\n人数: ${numberOfPeople}`);

        if (bmiRange === '17.5以下') {
          router.push({
            path: '/admin/school/memberManage',
            query: {
              gender: '1',
              bmiMax: 17.49,
              bmiMin: 0,
              testYear: '2024',
              page: 1,
              pageSize: 5,
            }
          })
        }
        else if (bmiRange === '17.5-17.9') {
          router.push({
            path: '/admin/school/memberManage',
            query: {
              gender: '1',
              bmiMax: 17.9,
              bmiMin: 17.5,
              testYear: '2024',
              page: 1,
              pageSize: 5,
            }
          })
        }
        else if (bmiRange === '17.9-23.9') {
          router.push({
            path: '/admin/school/memberManage',
            query: {
              gender: '1',
              bmiMax: 23.9,
              bmiMin: 18,
              testYear: '2024',
              page: 1,
              pageSize: 5,
            }
          })
        }
        else if (bmiRange === '24-30') {
          router.push({
            path: '/admin/school/memberManage',
            query: {
              gender: '1',
              bmiMax: 30,
              bmiMin: 24,
              testYear: '2024',
              page: 1,
              pageSize: 5,
            }
          })
        }
        else if (bmiRange === '30以上') {
          router.push({
            path: '/admin/school/memberManage',
            query: {
              gender: '1',
              bmiMax: 999,
              bmiMin: 30,
              testYear: '2024',
              page: 1,
              pageSize: 5,
            }
          })
        }


      }
    });


  } catch (error) {
    console.log('获取左下中心图失败！')
  }
}
const barChart2 = ref<HTMLElement | null>(null);
// 初始化
let barChart2Instance: echarts.ECharts | null = null;
const initBarChart2 = () => {
  if (barChart2.value) {
    barChart2Instance = echarts.init(barChart2.value);
    updateBarChart2();
  }
};
//柱状图 BMI 女
const updateBarChart2 = async () => {
  try {
    type EChartsOption = echarts.EChartsOption;
    var option: EChartsOption;

    option = {
      title: {
        text: 'BMI/女', // 主标题
        //subtext: '按不同范围划分的BMI值', // 副标题
        left: 'center', // 标题居中
        textStyle: {
          color: '#fff', // 标题文字颜色
          fontSize: '1.1rem', // 标题字体大小
        },
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: ["17以下", "17-17.2", "17.2-23.9", "23.9-24", "24以上"],
          axisLabel: {
            rotate: 0,//倾斜度
            color: '#ccc',// 调整轴标签字体颜色
            fontSize: '0.7rem', // 设置字体大小
            interval: 0, // 强制显示所有标签
          },
          axisTick: {
            alignWithLabel: true
          },
          name: 'BMI', // 横坐标标题
          nameLocation: 'start', // 关键：标题从轴线起点开始
          nameTextStyle: {
            color: '#fff', // 横坐标标题颜色
            fontSize: '0.9rem', // 设置字体大小
          },
          nameGap: 25, // 向右移动标题，调整此值来控制标题的位置
        }
      ],
      yAxis: [
        {
          type: 'value',
          axisLabel: {
            rotate: 0,//倾斜度
            fontSize: '0.7rem', // 设置字体大小
            color: '#ccc' // 调整轴标签字体颜色
          },
          name: '人数/人', // 纵坐标标题
          nameTextStyle: {
            color: '#fff', // 纵坐标标题颜色
            fontSize: '1rem', // 纵坐标标题字体大小
            padding: [0, 40, -15, 0] // 向右偏移，值越大，标题越向右移动（顶部右侧、底部左侧、左右对称）
          },
          nameGap: 29, // 向下移动标题，调整此值来控制标题的位置
          nameLocation: 'end', // 横坐标标题的位置，'start', 'center', 'end'
        }
      ],
      series: [
        {
          name: 'Direct',
          type: 'bar',
          barWidth: '60%',
          data: chartData.value.femaleBar,
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#FFC0CB' // 渐变起始颜色
            },
            {
              offset: 1, color: '#FFF0F5' // 渐变结束颜色
            }]
          },
          markArea: {
            data: [
              // 偏轻区域
              [
                {
                  name: '偏轻',
                  xAxis: '17以下',
                  itemStyle: { color: 'rgba(255, 0, 0, 0.1)' }, // 浅红色
                  label: {
                    position: 'top', // 文字显示在区域内部
                    formatter: '偏轻',
                    fontSize: '1rem', // 设置字体大小
                    color: 'red', // 设置字体颜色
                    offset: [-12, 0] // 微调文字位置
                  }
                },
                { xAxis: '17以下' }
              ],
              // 合格区域 
              [
                {
                  name: '合格',
                  xAxis: '17-17.2',
                  itemStyle: { color: 'rgba(255, 255, 0, 0.2)' }, // 浅黄色背景
                  label: {
                    position: 'top', // 文字显示在区域内部
                    formatter: '合格',
                    fontSize: '1rem', // 设置字体大小
                    color: '#FFA07A', // 设置字体颜色
                    offset: [0, 0] // 微调文字位置
                  }
                },
                { xAxis: '17-17.2' }
              ],
              // 优秀区域
              [
                {
                  name: '优秀',
                  xAxis: '17.2-23.9',
                  itemStyle: { color: 'rgba(0, 255, 0, 1)' }, // 浅绿色
                  label: {
                    position: 'top', // 文字显示在区域内部
                    formatter: '优秀',
                    fontSize: '1rem', // 设置字体大小
                    color: '#00FF00', // 设置字体颜色
                    offset: [0, 0] // 微调文字位置
                  }
                },
                { xAxis: '17.2-23.9' }
              ],
              // 合格区域 
              [
                {
                  name: '合格',
                  xAxis: '23.9-24',
                  itemStyle: { color: 'rgba(255, 255, 0, 0.2)' }, // 浅黄色
                  label: {
                    position: 'top', // 文字显示在区域内部
                    formatter: '合格',
                    fontSize: '1rem', // 设置字体大小
                    color: '#FFA07A', // 设置字体颜色
                    offset: [0, 0] // 微调文字位置
                  }
                },
                { xAxis: '23.9-24' }
              ],
              // 偏重区域 
              [
                {
                  name: '偏重',
                  xAxis: '24以上',
                  itemStyle: { color: 'rgba(255, 0, 0, 0.1)' }, // 浅红色
                  label: {
                    position: 'top', // 文字显示在区域内部
                    formatter: '偏重',
                    fontSize: '1rem', // 设置字体大小
                    color: 'red', // 设置字体颜色
                    offset: [12, 0] // 微调文字位置
                  }
                },
                { xAxis: '24以上' }
              ]
            ]
          },
          markLine: {
            silent: true, // 添加此行，使 markLine 不响应鼠标事件
            data: [
              // 偏轻的线
              {
                name: '偏轻',
                xAxis: '17以下',
                lineStyle: { type: 'dashed', color: 'red' },
                label: { position: 'end', formatter: '' }
              },
              // 优秀的线
              {
                name: '',
                xAxis: '17.2-23.9',
                lineStyle: { type: 'dashed', color: '#00FF00' },
                label: { position: 'end', formatter: '' }
              },
              // 偏重的线
              {
                name: '偏重',
                xAxis: '24以上',
                lineStyle: { type: 'dashed', color: 'red' },
                label: { position: 'end', formatter: '' }
              }
              // 'dashed' — 虚线。'solid' — 实线。'dotted' — 点线。
            ]
          }
        }
      ]
    };


    option && barChart2Instance.setOption(option);
    barChart2Instance.on('click', function (params) {
      if (params.seriesType === 'bar') {
        const bmiRange = params.name; // BMI 范围，例如 "17.5以下"
        // const numberOfPeople = params.value; // 人数
        // alert(`BMI 范围: ${bmiRange}\n人数: ${numberOfPeople}`);
        if (bmiRange === '17以下') {
          router.push({
            path: '/admin/school/memberManage',
            query: {
              gender: '2',
              bmiMax: 16.99,
              bmiMin: 0,
              testYear: '2024',
              page: 1,
              pageSize: 5,
            }
          })
        }
        else if (bmiRange === '17-17.2') {
          router.push({
            path: '/admin/school/memberManage',
            query: {
              gender: '2',
              bmiMax: 17.2,
              bmiMin: 17,
              testYear: '2024',
              page: 1,
              pageSize: 5,
            }
          })
        }
        else if (bmiRange === '17.2-23.9') {
          router.push({
            path: '/admin/school/memberManage',
            query: {
              gender: '2',
              bmiMax: 23.9,
              bmiMin: 17.2,
              testYear: '2024',
              page: 1,
              pageSize: 5,
            }
          })
        }
        else if (bmiRange === '23.9-24') {
          router.push({
            path: '/admin/school/memberManage',
            query: {
              gender: '2',
              bmiMax: 24,
              bmiMin: 23.9,
              testYear: '2024',
              page: 1,
              pageSize: 5,
            }
          })
        }
        else if (bmiRange === '24以上') {
          router.push({
            path: '/admin/school/memberManage',
            query: {
              gender: '2',
              bmiMax: 999,
              bmiMin: 24,
              testYear: '2024',
              page: 1,
              pageSize: 5,
            }
          })
        }
      }
    });


  } catch (error) {
    console.log('获取左下中心图失败！')
  }
}


//堆叠图
const lineChart = ref<HTMLElement | null>(null);
// 初始化
let lineChartInstance: echarts.ECharts | null = null;
const initLineChart = () => {
  if (lineChart.value) {
    lineChartInstance = echarts.init(lineChart.value);
    updateLineChart();
  }
};
// 身高堆叠图
const updateLineChart = async () => {
  try {
    var option;
    const maleData = chartData.value.lineChart.maleData;
    const femaleData = chartData.value.lineChart.femaleData;
    const totalData = maleData.map((value, index) => value + femaleData[index]);

    option = {
      color: ['#00BFFF', '#FFC0CB'],
      title: {
        text: '男女身高分布情况',
        left: 'center',  // 居中对齐，可选 'left', 'center', 'right'
        top: '10px',  // 调整标题的垂直位置
        textStyle: {
          color: '#00BFFF',  // 文字颜色，可修改为其他颜色
          fontSize: '1.2rem',  // 文字大小
          fontWeight: 'bold'  // 文字加粗
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        }
      },
      legend: {
        data: ['男', '女'],
        left: 'center', // 位置，可选 'left'（左对齐）、'center'（居中）、'right'（右对齐）
        top: '33',  // 位置，可选 'top'（上方）、'bottom'（下方）、指定像素值
        textStyle: {
          color: '#ccc', // 文字颜色，可自定义
          fontSize: '1rem',   // 文字大小
        },
        itemWidth: 20,   // 图例图标宽度
        itemHeight: 10   // 图例图标高度
      },
      grid: {
        left: '6%',
        right: '7%',
        bottom: '0%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          data: [
            '150以下', '150', '152', '154', '156', '158', '160', '162', '164', '166', '168', '170', '172', '174', '176',
            '178', '180', '182', '184', '186以上'
          ],
          axisLabel: {
            rotate: 0,//倾斜度
            color: '#ccc',// 调整轴标签字体颜色
            fontSize: '0.7rem', // 设置字体大小
            interval: 0, // 强制显示所有标签
          },
          axisTick: {
            alignWithLabel: true
          },
          name: '身高\n(cm)', // 横坐标标题
          nameTextStyle: {
            color: '#1E90FF', // 横坐标标题颜色
            fontSize: '1rem', // 横坐标标题字体大小
            padding: [0, 0, 0, 0] // 左右移动，第四个参数控制向右（左移用负值）
          },
          nameGap: 10, // 增大数值，使标题向下移动
        },

      ],
      yAxis: [
        {
          type: 'value',
          axisLabel: {
            rotate: 0,//倾斜度
            color: '#ccc',// 调整轴标签字体颜色
            fontSize: '0.8rem', // 设置字体大小
            interval: 0, // 强制显示所有标签
          },
          axisTick: {
            alignWithLabel: true
          },
          name: '人数/人', // 横坐标标题
          nameTextStyle: {
            color: '#1E90FF', // 横坐标标题颜色
            fontSize: '1rem', // 横坐标标题字体大小
            padding: [0, 30, 0, 0]
          },
        },


      ],
      series: [
        {
          name: '女',
          type: 'line',
          stack: 'Total',
          smooth: true,
          lineStyle: {
            color: '#FFC0CB',  // 线条颜色
            width: 2
          },
          itemStyle: {
            color: '#FFC0CB'  // 点的颜色
          },
          showSymbol: false,//是否显示点
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#FFC0CB' // 渐变开始颜色（顶部）
              },
              {
                offset: 1,
                color: 'rgba(255, 192, 203, 0.2)' // 渐变结束颜色（底部，透明度降低）
              }
            ])
          },
          emphasis: {
            focus: 'series'
          },
          data: femaleData,
          markLine: {
            silent: true, // 添加此行，使 markLine 不响应鼠标事件
            data: [
              {
                xAxis: '158', // 在 x 轴的 158 处画线
                label: {
                  formatter: '女生最低标准', // 显示的文字
                  position: 'insideEndTop', // 文字位置
                  color: '#00FF7F', // 文字颜色
                  fontSize: '0.8rem'
                },
                lineStyle: {
                  type: 'dashed', // 虚线
                  color: '#FFC0CB', // 线条颜色
                  width: 1
                }
              }
            ]
          }
        },
        {
          name: '男',
          type: 'line',
          stack: 'Total',
          smooth: true,
          lineStyle: {
            color: '#00BFFF',  // 线条颜色
            width: 2
          },
          itemStyle: {
            color: '#00BFFF'  // 点的颜色
          },
          showSymbol: false,//是否显示拐点
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#00BFFF' // 渐变开始颜色（顶部）
              },
              {
                offset: 1,
                color: 'rgba(0, 191, 255, 0.2)' // 渐变结束颜色（底部，透明度降低）
              }
            ])
          },
          emphasis: {
            focus: 'series'
          },
          data: maleData,
          markLine: {
            silent: true, // 添加此行，使 markLine 不响应鼠标事件
            data: [
              {
                xAxis: '160', // 在 x 轴的 160 处画线
                label: {
                  formatter: '男生最低标准', // 显示的文字
                  position: 'insideEndTop', // 文字位置
                  color: '#00FF7F', // 文字颜色
                  fontSize: '0.8rem'
                },
                lineStyle: {
                  type: 'dashed', // 虚线
                  color: '#00BFFF', // 线条颜色
                  width: 1
                }
              }
            ]
          }
        },

        {
          name: '总和',
          type: 'line',
          smooth: true,
          showSymbol: false,  // 不显示拐点
          lineStyle: {
            color: 'red',  // 总和的线条颜色
            width: 0,
            type: 'dashed'  // 总和显示为虚线，和男女区分开
          },
          emphasis: {
            focus: 'series'
          },
          data: totalData // 男+女数据相加
        }
      ]

    };


    option && lineChartInstance.setOption(option);
    lineChartInstance.on('click', function (params) {
      // 1. 点击坐标轴标签（身高范围）
      if (params.componentType === 'xAxis') {
        const heightRange = params.value;
        // alert(`点击了身高范围: ${heightRange}`);
        return;
      }

      // 2. 精确排除标记线点击
      if (
        params.componentType === 'series' &&
        params.seriesType === 'line' &&
        (params.dataType === 'edge' || params.componentSubType === 'markLine')
      ) {
        return; // 直接返回，不处理标记线点击
      }

      if (params.seriesType === 'line' && params.seriesName !== '总和') {
        const seriesName = params.seriesName; // "男" 或 "女"

        // 确保是有效的数据点点击
        if (params.dataIndex === undefined || params.dataIndex === null) {
          return;
        }

        // 安全获取身高范围
        const xAxisData = lineChartInstance.getOption().xAxis[0].data;
        const heightRange = xAxisData[params.dataIndex];
        const value = params.value;


        console.log(params)
        // alert(`性别: ${seriesName}\n身高范围: ${heightRange}\n人数: ${value}`);

        if (seriesName === '男' && removeChinese(heightRange) > 160) {
          console.log(heightRange)
          router.push({
            path: '/admin/school/memberManage',
            query: {
              gender: 1,
              // gender: seriesName === '男' ? 1 : 0,
              heightMin: removeChinese(heightRange),
              heightMax: 200,
              testYear: '2024',
              page: 1,
              pageSize: 5,
            }
          })
        }
        else if (seriesName === '女' && removeChinese(heightRange) > 158) {

          router.push({
            path: '/admin/school/memberManage',
            query: {
              gender: 2,
              heightMin: removeChinese(heightRange),
              heightMax: 200,
              testYear: '2024',
              page: 1,
              pageSize: 5,
            }
          })
        }
        else if (seriesName === '女' && removeChinese(heightRange) <= 158) {
          router.push({
            path: '/admin/school/memberManage',
            query: {
              gender: 2,
              heightMin: 0,
              heightMax: removeChinese(heightRange),
              testYear: '2024',
              page: 1,
              pageSize: 5,
            }
          })
        }

        else if (seriesName === '男' && removeChinese(heightRange) <= 160) {
          router.push({
            path: '/admin/school/memberManage',
            query: {
              gender: 1,
              heightMin: 0,
              heightMax: removeChinese(heightRange),
              testYear: '2024',
              page: 1,
              pageSize: 5,
            }
          })
        }
      }
    });


  } catch (error) {
    console.log('获取左下中心图失败！')
  }
}


function removeChinese(str) {
  // 移除所有中文字符
  const numStr = str.replace(/[\u4e00-\u9fff]/g, '');

  // 转换为数字
  const num = parseInt(numStr);

  // 返回数字（如果转换失败返回0）
  return isNaN(num) ? 0 : num;
}
onMounted(() => {
  init();
})


</script>

<style scoped>
.box {
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.container {
  height: 85%;
  width: 97%;
}

.center-container {
  display: flex;
  width: 100%;
  height: 40%;
}

.bottom-container {
  width: 100%;
  height: 35%;
}

.top-container {
  display: flex;
  width: 100%;
  height: 25%;
}

.bar-chart {
  flex: 1;
  height: 100%;
  width: 40%;
}

.pie-chart {
  flex: 1;
  height: 100%;
  width: 40%;
}

.line-chart {
  height: 100%;
  width: 100%;
}



h1 {
  text-align: center;
  color: aliceblue;
  margin: 0;
  margin-top: 1rem;
  padding: 0;
}
</style>